// public/js/main.js

// --- 1. 全局变量 ---
// 使用相对当前页面的地址连接 Socket.IO，便于通过域名或 IP 访问
const socket = io();
const viewContainer = document.getElementById('view-container');
let currentView = '';
let currentRoomId = '';
let currentModule = null; // 用于存储当前已加载的模块

// 在 main.js 的顶层，添加一个全局事件监听器
window.addEventListener('navigate', (event) => {
    const path = event.detail.path;
    console.log(`接收到导航事件，准备前往: ${path}`);
    if (path) {
        navigateTo(path, event.detail.state);
    }
});

// --- 2. 导航函数 (SPA 的核心) ---
async function navigateTo(viewPath, state = null) {
    console.log(`正在导航到: ${viewPath}`);
    currentView = viewPath;

    // 如果有上一个模块，并且它有 cleanup 函数，就执行它
    if (currentModule && currentModule.cleanup) {
        currentModule.cleanup(socket);
    }

    try {
        // 1. 加载视图的 HTML 片段
        // 使用 fetch 加载视图的 HTML 片段
        const response = await fetch(`/views/${viewPath}`);
        if (!response.ok) throw new Error('网络响应错误');
        
        const html = await response.text();
        
        // 将加载的 HTML 插入到视图容器中
        viewContainer.innerHTML = html;

        const targetUrl = new URL(viewPath, window.location.origin).href;
        console.log("targetUrl:", targetUrl);
        // - 用 pushState 修改 URL，同时记录历史（支持浏览器后退）
        history.pushState({}, '', targetUrl);
        
        // 2. 根据视图路径，动态导入对应的 JS 模块
        await initViewScripts(viewPath, state);

    } catch (error) {
        viewContainer.innerHTML = `<div class="error">加载页面失败: ${error.message}</div>`;
        console.error('导航错误:', error);
    }
}

// 根据视图路径动态导入并初始化 JS
async function initViewScripts(viewPath, state) {
    try {

        const url = new URL(viewPath, window.location.origin);
        const pathname = url.pathname; // 获取路径名，如 "/room.html"

        // 从路径名中移除开头的斜杠，以匹配我们的 case
        const viewName = pathname.startsWith('/') ? pathname.slice(1) : pathname;
        switch(viewName) {
            case 'lobby.html':
                // 动态导入 lobby.js 模块
                const lobbyModule = await import('./lobby.js');
                lobbyModule.init(socket); // 调用模块的 init 函数
                currentModule = lobbyModule; // 保存模块引用
                break;
            
            case 'room.html':
                const roomModule = await import('./room.js');
                roomModule.init(socket);
                currentModule = roomModule;
                break;
            
            case 'games/geistes.html':
                console.log('正在加载 Geistes 游戏模块...');
                console.log('传入的状态数据:', state);
                const geistesModule = await import('./games/geistes-game.js');
                console.log('Geistes 模块加载完成，正在初始化...');
                geistesModule.init(socket, state);
                currentModule = geistesModule;
                console.log('Geistes 游戏初始化完成');
                break;
            
            case 'games/tictactoe.html':
                const tictactoeModule = await import('./games/tictactoe-game.js');
                tictactoeModule.init(socket, state);
                currentModule = tictactoeModule;
                break;
            
            case 'games/loveletter.html':
                console.log('正在加载 Love Letter 游戏模块...');
                console.log('传入的状态数据:', state);
                const loveletterModule = await import('./games/loveletter-game.js');
                console.log('Love Letter 模块加载完成，正在初始化...');
                loveletterModule.init(socket, state);
                currentModule = loveletterModule;
                console.log('Love Letter 游戏初始化完成');
                break;
            
            default:
                console.log(`没有为视图 ${viewPath} 定义模块。`);
        }
    } catch (error) {
        console.error(`动态导入模块失败 for ${viewPath}:`, error);
    }
}

function updateMessage(element, text, color = 'inherit') {
    if (element) { // 增加一个安全检查
        element.textContent = text;
        element.style.color = color;
    }
}

// 当页面首次加载时，显示大厅视图
navigateTo('lobby.html');